<template>
	<view>
		<u-popup v-model="popShow" mode="bottom" length="100%" 
				close-icon-pos="top-left" :duration="350"
				safe-area-inset-bottom :mask-close-able="false">
			<view>
			<!-- 	<view  style="margin-top: 15%;margin-left: 30rpx;">
					<u-icon name="close" color="#000000" :size="36" @click="close()"></u-icon>
				</view> -->
				<view style="margin-top: 40%;">
					<view style="text-align: center;font-size: 40rpx;color: #000000;font-weight: bold;">
						<text>手机号登录</text>
					</view>
					<view style="margin-top: 40rpx;font-size:34rpx;" class="u-p-l-40 u-p-r-40">
						<view>
							<u-field border-bottom border-top :label-width="180"
							:field-style="{fontSize:'34rpx'}" 
									 style="font-size: 34rpx;padding:30rpx 0rpx;" 
									 placeholder-style="font-size:30rpx;color:#b8b8b8"
									 v-model="country" label="国家/地区">
								<u-icon slot="right" name="arrow-right" color="#000000" :size="34"></u-icon>	
							</u-field>
						</view>
						
						<view class="u-flex u-row-between u-col-center u-border-bottom">
							<view style="width: 180rpx;">
								<text>手机号</text>
							</view>
							<view  class="u-flex u-row-left u-col-center">
								<view class="u-m-l-10 u-m-r-20" style="color: #606266;">
									<text>+86</text>
								</view>
								<view>
									<u-field :label-width="0" :border-bottom="false"
											 :field-style="{fontSize:'34rpx'}" type="number"
											 style="font-size: 34rpx;padding:30rpx 0rpx;" 
											 placeholder-style="font-size:30rpx;color:#b8b8b8"
											 v-model="phone" label="">
									</u-field>
								</view>
							</view>
							
						</view>
						<view class="u-m-t-40"  style="color: #346287;font-size: 28rpx;font-weight: bold;">
							<text>用微信号/QQ号/邮箱登录</text>
						</view>
					</view>
				</view>
				<view>
					<view style="width:100%;position: absolute;bottom: 50rpx;">
						<view class="u-font-28 u-tips-color" style="text-align: center;">
							<text>上述手机号仅用作登录验证</text>
						</view>
						<view class="u-flex u-row-center u-col-center" style="width: 100%;">
							<view  style="width:50%;margin-top: 30rpx;">
								<u-button :disabled="!validateMobile()" type="success" @click="bindAgree" :custom-style="customBtnStyle">同意并继续</u-button>
							</view>
						</view>
						<view class="u-flex u-row-center u-col-center u-font-28" style="margin-top: 100rpx;">
							<view style="color: #346287;font-weight: bold;">找回密码</view>
							<view class="u-m-l-20 u-m-r-20" style="color: #bbbbbb;font-size: 20rpx;">|</view>
							<view @click="toReg()" style="color: #346287;font-weight: bold;">立即注册</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				country:"中国大陆",
				phone:"",
				customBtnStyle:{
					borderRadius:'20rpx'
				},
				popShow:true,
			};
		},
		methods:{
			validateMobile:function(){
				return this.$u.test.mobile(this.phone);
			},
			close:function(){
				let that=this;
				if(this.phone.length<1){
					this.globalUtil.utilAlert("手机号不能为空!");
					return;
				}
				that.popShow=false;
				this.$emit("close");
			},
			bindAgree:function(){
				let validateFlag=this.validateMobile();
				if(!validateFlag){
					this.globalUtil.utilAlert("手机号有误！");
					return false;
				}
				this.popShow=false;
				uni.removeStorageSync("wxLoginParam");
				this.$emit("agree",{country:this.country,phone:this.phone});
			},
			toReg:function(){
				this.popShow=false;
				this.$emit("close");
				this.$u.route({
					url:"/pages/start/register",
					params: {}
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
